<template>
  <div>
    <div style="font-size: 16px;font-weight: 500;color: #1D2129;margin-bottom: 16px;">
      业余训练情况-运动员文化教育
    </div>

    <div style="display: flex; ">
      <div style="width:50%">
        <div style="font-size: 26px;color: #41B776;">34,201</div>
        <div style="font-size: 12px;">体校总数/所</div>
      </div>
      <div style="width:50%">
        <div style="font-size: 26px;color: #0F0F0F;">34,201</div>
        <div style="font-size: 12px;">运动员总数/人</div>
      </div>
    </div>

    <div style="display: flex;width: 100%;">
      <div style="width:50%">
        <div ref="Chart1" style="width:100%;height:290px;margin-top:-20px;"></div>
      </div>

      <div style="width:50%">
        <div ref="Chart2" style="width:100%;height:290px;margin-top:-20px;"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import { getSheet1Culture } from "@/api/statistics";
  export default {
    name: "SchoolType",
    data() {
      return {
        chartInstance: null,
        date: new Date().getFullYear(),
      };
    },
    mounted() {
      this.datalist();
    },

    methods: {
      async datalist() {
        const res = await getSheet1Culture({
          year: this.date,
        });
        if (res.data) {
          console.log(res.data);
        }
        // 基于准备好的dom，初始化echarts实例
        this.Chart1 = echarts.init(this.$refs.Chart1);
        this.Chart2 = echarts.init(this.$refs.Chart2);
        // 指定图表的配置项和数据

        const option2 = {
          color: ["#4E88F5"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#41B776"
              }
            }
          },

          xAxis: [{
            type: "category",
            data: ["体育部门办", "教育部门办", "体教合办"],
            axisPointer: {
              type: "shadow"
            }
          }],
          yAxis: [{
            type: "value",

            min: 0,
            max: 1000,
            interval: 200,
            axisLabel: {
              formatter: "{value} "
            }
          }],
          series: [{
            name: "Evaporation",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value;
              }
            },
            data: [20, 49, 70]
          }]
        };
        const option1 = {
          color: ["#41B776"],
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#41B776"
              }
            }
          },

          xAxis: [{
            type: "category",
            data: ["体育部门办", "教育部门办", "体教合办"],
            axisPointer: {
              type: "shadow"
            }
          }],
          yAxis: [{
            type: "value",

            min: 0,
            max: 1000,
            interval: 200,
            axisLabel: {
              formatter: "{value} "
            }
          }],
          series: [{
            name: "Evaporation",
            type: "bar",
            tooltip: {
              valueFormatter: function(value) {
                return value;
              }
            },
            data: [20, 49, 70]
          }]
        };
        // 使用刚指定的配置项和数据显示图表。
        this.Chart1.setOption(option1);
        this.Chart2.setOption(option2);
        // 监听父元素大小变化 刷新图表
        var ro = new ResizeObserver(entries => {
          for (let entry of entries) {
            const cr = entry.contentRect;
            this.Chart1.resize();
            this.Chart2.resize();
          }
        });
        // ro.observe(this.$refs.Chart1);
        ro.observe(this.$refs.Chart2);
      }
    }
  };
</script>

<style scoped>
  .dianidan {
    width: 7px;
    height: 7px;
    margin-right: 5px;
    margin-top: 3px;
  }
</style>
